<template>
  <div>
    <!-- v-bind指令 ， 作用： 把html元素的属性和 vue里面的动态数据绑定
        v-bind:属性="动态数据"
    -->
    <div v-bind:id="id">{{ id }}</div>
    <div><button @click="clickFn">修改id</button></div>
    <!-- 动态属性的使用：通常用在动态渲染的数据上，比如： img.src  class  , 子传父，父传子的时候，也会使用到这些 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "a",
    };
  },
  methods: {
    clickFn() {
      this.id = "b";
    },
  },
};
</script>
